<template>
  <div class="allotRole-box">
    <!-- 注意 : 这里的 v-model不能绑定props  需要改成model-value -->
    <!-- 因为这里的 roleDialogVisible 是从父组件传过来的,如果绑定在 v-model上的话,会出现子组件直接修改父组件的数据,不合理 -->
    <el-dialog
      :model-value="roleDialogVisible"
      title="分配角色"
      @close="cancelFn"
    >
      <el-select
        v-model="roleIds"
        multiple
        placeholder="请选择角色"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFn">取消</el-button>
          <el-button type="primary" @click="confirmFn">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import * as http from "@/request/http";
import { ElMessage } from "element-plus";

const props = withDefaults(
  defineProps<{
    roleDialogVisible: boolean;
    id: number;
  }>(),
  {
    roleDialogVisible: false,
    id: 0,
  }
);

const roleIds = ref<number[]>([]);
const options = ref<IRoleModel[]>([]);

// 获取 所有角色列表 渲染到 options选项中
http.role.roleListAll().then((res) => {
  console.log("所有的角色列表 : ", res);
  options.value = res.data;
});

const emits = defineEmits<{
  (e: "cancel"): void;
  (e: "confirm"): void;
}>();

// 调用 自定义事件 cancel
const cancelFn = () => {
  emits("cancel");
};

// 调用 自定义事件 confirm
const confirmFn = () => {
  // 点击 确定 发送请求 更新当前用户的分配角色
  // 校验
  if (props.id != 0) {
    http.admin
      .updateAdminRoleById({
        adminId: props.id,
        roleIds: roleIds.value,
      })
      .then((res) => {
        if (res.code === 200) {
          // 提示用户 分配角色成功
          ElMessage.success("分配角色成功");
        }
      });
  }
  // 关闭
  emits("confirm");
};

// 监听id变化  重新获取角色信息
watch(
  () => props.id,
  () => {
    if (props.id != 0) {
      // 根据 id 获取指定用户 的 所有角色
      http.admin.getAdminRoleById(props.id).then((res) => {
        console.log("watch监听到id变化了 : ", res); // 将IRoleModel[] 处理成 number[]
        roleIds.value = res.data.map((item) => item.id);
      });
    }
  }
);
</script>

<style scoped lang="less"></style>
